@()(implicit request: RequestHeader, messages: Messages)
@main(messages("userGuide"))("userGuide", "") {

	<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/tableFilter.css")">
	<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/doc.css")">

	<script src="@routes.Assets.at("bootstrap-table-master/dist/extensions/filter-control/my-bootstrap-table-filter-control.js")" type="text/javascript"></script>

	<style>
			.genome-pre {
				white-space: pre-wrap;
				word-wrap: break-word;
				border: 0px solid #ccc;
				background-color: white;
			}

			select:not([multiple]) {
				-webkit-appearance: none;
				-moz-appearance: none;
				background-position: right 50%;
				background-repeat: no-repeat;
				background-image: url();
				padding: .5em;
				padding-right: 1.5em
			}

			.fr {
				float: right;
			}

			.base-info .item .title span {
				display: inline-block;
				border-left: 2px solid #0b8af4;
				font-size: 14px;
				color: #333;
				padding-left: 10px;
			}

			.photo span {
				display: block;
				width: 92px;
				height: 92px;
			}

			.photo img {
				width: 100%;
				height: 100%;
			}

			.avator-txt {
				font-size: 12px;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 17px;
				color: #1d6af2;
				cursor: pointer;
				text-align: center;
			}

			#tab_1_1 img {
				width: 80%;
			}

			.myImg {
				width: 80%;
				margin-bottom: 10px;
				margin-top: 10px;
			}

			.paragraph {
				font-weight: 300;
			}

			.affix {
				top: 20px;
			}

			.nav {
				display: block;
			}

			h4 {
				margin-top: 20px;
				margin-bottom: 10px;
			}

			.myOnlyLi {
				margin-left: 2em;
			}

			.mySquareUl > li {
				list-style-type: square;
			}

			.myCircleUl > li {
				list-style-type: circle;
			}
			.pUl{
				margin-top: -15px;
			}

			.myDiscUl > li {
				list-style-type: disc;
			}

			.myDecimalUl > li {
				list-style-type: decimal;
			}
	</style>
	<div class="page-content">

		<div class="row">
			<div class="col-md-12">
				<div class="portlet light profile-sidebar-portlet ">

					<div class="portlet-title">
						<div class="item">
							<div class="title clear">
								<span>@messages("userGuide")</span>
							</div>
						</div>
						<div class="caption">
						</div>
					</div>


					<div class="portlet-body">

						<div class="row">
							<div class="col-xs-9" style="line-height: 2em">

								<div class="row" id="1">
									<div class="col-xs-12">

										<h3>1.平台页面简介</h3>
										<h4>1.1.用户数据仓库（Data Repositories）<br>

										</h4>
										<p>
											本页面展示所有的用户上传数据。请根据数据内容，将不同类型数据上传至相应菜单页。
										</p>
										<p class="paragraph ">
											1.1.1数据类型：
										</p>
										<p>
											<b>1.Data-matrix</b><br>
											代谢物定量数据，一般以代谢物为行名，样本为列名，以浓度、峰面积或峰强度信息表示定量值。<br>
											<img class="myImg" src="@routes.Assets.at("images/guide_1.png")">
										</p>
										<p>
											<b>2. Sample-info-table</b><br>
											样本的分组信息，可以是样本的配对信息、时间、临床信息、表型数据等，数据格式为两列，一列为样本ID，一列为其对应分组。
											<br><img class="myImg" src="@routes.Assets.at("images/guide_2.png")">
										</p>
										<p>
											<b>3. Variable-info-table</b>（可选）<br>
											代谢物的信息，一般为代谢物所属分类或子类信息。
										</p>
										<p class="paragraph ">
											1.1.2 数据格式规则
										</p>
										<p>
											<b>4. 表头（样本名）：</b><br>
											请您用以字母开头，且只包含字母、数字和下划线("_")的字符串作为样本名称，以便程序更好地进行识别。
										</p>
										<p>
											<b>5.表达量值：</b><br>
											请使用数字格式，其中请勿出现"/"或""等特殊字符。
										</p>
									</div>
								</div>

								<div class="row" id="2">
									<div class="col-xs-12">
										<h3>
											2.模块类（Modules）
										</h3>
										<p>
											该部分功能提供了单独模块的分析工具，您可以按需使用任意合适的数据进行该类分析。
											<br>
											<img class="myImg" src="@routes.Assets.at("images/guide_3.png")">
											<br>
											目前本部分包括26个数据处理或分析绘图工具，您可以把自己常用的工具加入"FAVORITES"列表中。
										</p>
									</div>
								</div>

								<div class="row" id="3">
									<div class="col-xs-12">
										<h3>
											3. 模块分析结果（Results from Modules）
										</h3>
										<p>
											该页面显示您在模块分析部分的所有任务。一旦您在模块功能中提交了任务，该任务将被添加到此页面中，并实时显示运行状态。
											<br>
											<img class="myImg" src="@routes.Assets.at("images/guide_4.png")">
											<br>
											对于已结束分析的任务（成功或失败），您可以进行以下操作：
										</p>
										<ul class="myDiscUl pUl">
											<li>
												<b>查看任务</b>——单击任务名称：
												<ul class="myCircleUl">
													<li>
														查看已运行任务的信息，包括任务状态、时间、数据、参数、以及在线预览的结果，其中在预览结果中您可以进行简单的图形调整
													</li>
												</ul>
											</li>
											<li>
												<b>下载任务结果</b>
												——单击下载按钮<img style="height: 16px" src="@routes.Assets.at("images/guide_5.png")">
												：
												<ul class="myCircleUl">
													<li>
														下载分析结果的压缩包。
													</li>
												</ul>
											</li>
											<li>
												<b>查看任务日志</b>
												——单击日志按钮<img style="height: 16px" src="@routes.Assets.at("images/guide_6.png")">
												：
												<ul class="myCircleUl">
													<li>
														显示任务运行情况，若任务成功，则显示“Run successfully!”，否则显示错误信息。
													</li>
												</ul>
											</li>
											<li>
												<b>修改任务</b>
												——单击修改按钮<img style="height: 16px" src="@routes.Assets.at("images/guide_7.png")">
												：
												<ul class="myCircleUl">
													<li>
														回到提交任务前的界面，可修改部分参数后直接提交，系统将自动在原任务名称后添加计数后缀，并作为一个新任务提交。
													</li>
												</ul>
											</li>
											<li>
												<b>删除任务</b>
												——单击删除按钮<img style="height: 16px" src="@routes.Assets.at("images/guide_8.png")">
												：
												<ul class="myCircleUl">
													<li>
														从列表中删除该任务。
													</li>
												</ul>
											</li>
										</ul>
									</div>
								</div>

								<div class="row" id="4">
									<div class="col-xs-12">
										<h3>
											4. 流程类（Workflow）
										</h3>
										<p>
											该部分功能提供了从初始数据到各项生信分析结果的多种分析功能，您可以自行选择代谢组学分析流程，甚至按需自行设计您自己的流程，并对流程中上下游的各个分析节点进行更改。
										</p>
										<h4>4.1页面区域介绍</h4>
										<p>
											<img class="myImg" src="@routes.Assets.at("images/guide_9.png")">
											<br>
											单击 <b>"Create a new workflow"</b> 进入新建流程页面，然后您可以在页面上半部分看到流程的基本信息：
											<br>
									<li class="myOnlyLi"><b>"Project name"</b> 是该流程项目的标题，您可以自行修改；</li>
										<li class="myOnlyLi"><b>"Example workflow"</b>
											选项中内置了多种常用模板，您可以直接选择使用；</li>
										<li class="myOnlyLi"><b>"Data-matrix"</b>
											是您将要分析的数据，在您选择模板之后，这里将自动填充一个示例数据，您将其替换为自己的数据即可，如果您还未上传数据，可以单击"Upload File"跳转到数据仓库来上传数据；</li>
										<li class="myOnlyLi"><b>"Sample-Info-table"</b>
											是您数据的分组信息，同样需要您替换为自己的数据。</li>
										接下来，在"Data-matrix"和"Sample-Info-table"中已有数据时，页面的下半部分将变为可编辑状态，这部分分为三个区域：
										<br>
										<img class="myImg" src="@routes.Assets.at("images/guide_10.png")">
										<br>
										<li class="myOnlyLi"><b>"Modules"</b>：这里是模块列表，每个模块都可以直接拖动到Workflow区域成为一个分析节点。
											<br>
											<img class="myImg" src="@routes.Assets.at("images/1_node_drag.gif")">
											<br>
										</li>

										<li class="myOnlyLi">
											<b>"Workflow"</b>
											：这里是流程的构建区域，您可以将多个分析节点用箭头连接起来，使之具备上下游的逻辑关系，上游节点的输出即为下游节点的输入。
											<br>
											当您将光标移动到分析节点上时，节点矩形框上下边框处会出现红色箭头，上方的红色箭头表示该分析节点可以接受数据输入，下方的红色箭头表示该分析节点可以产生数据输出，若无下方红色箭头，表示该分析节点是终端节点，即某种分析的最终结果。请注意，<b>
											"Get Intersection"</b>和<b>"Get Union"</b>
											可以接受多个上游节点的数据作为输入，其他节点都只能接受一个节点作为上游输入。
											<br>
											<img class="myImg" src="@routes.Assets.at("images/2_node_connect.gif")">
											<br>
											若需多次分析某个模块，可以重复拖入，或者选中节点后点击右键并选择"copy"，程序将自动添加后缀（如“_1”、“_2”）。
											<br>
											<img class="myImg" src="@routes.Assets.at("images/3_node_repeat.gif")">
										</li>

										<li class="myOnlyLi">
											<b>"Parameters"</b>：这里是分析节点的参数区域，当您在<b>"Workflow"</b>
											中单击选定了一个分析节点（边框将由黑色变成蓝色）时，参数区域会即时展示该分析节点的可选参数。
											<img class="myImg" src="@routes.Assets.at("images/4_arg_change.gif")">
										</li>
										</p>
										<h4>4.2分析节点介绍</h4>
										<p>
											<b>1. Data-matrix</b>
											<br>
											本节点是流程的开端，您上传并选择的数据将被此节点读入。
											<br>
											可选参数：
										</p>
										<ul class="myCircleUl pUl">
											<li>
												Group：用于后续分析的组别
											</li>
											<li>
												Species：通过数据库和分类选择物种
											</li>
										</ul>
											<b>2.Cleaning and processing</b>
											<br>
											数据的初步清洗处理
											<br>
											可选参数：
										</p>
										<ul class="myCircleUl" style="margin-top: -10px">
											<li>
												add a new step：提供多种数据处理方法
												<ul class="mySquareUl">
													<li>Identification missing value：用颜色区分缺失值</li>
													<li>
														Remove samples with missing value over threshold：按缺失值比例判断是否删除样本
													</li>
													<li>
														Remove variables with missing value over threshold：按缺失值比例判断是否删除代谢物
													</li>
													<li>
														Remove variables with high RSD in QC samples：剔除QC样本中高RSD（相对标准偏差）的代谢物
													</li>
													<li>
														Merge duplicated variables：合并重复测得的代谢物
													</li>
													<li>
														Missing value imputation：缺失值补缺方法
													</li>
													<li>
														Data normalization by sum/median：数据标准化方法
													</li>
													<li>
														Correct batch effect by LOESS：批次效应校正
													</li>
													<li>
														Data Transformation：数据转换
													</li>
													<li>
														Data normalization by internal standard：通过内标进行标准化
													</li>
													<li>
														Data normalization by external standard：通过外标进行标准化
													</li>
													<li>
														Filter variables by absolute/relative expression：根据定量值过滤代谢物
													</li>
													<li>
														Data Scaling：数据归一化
													</li>
													<li>
														Remove QC and other groups：去除质控或某个样本组
													</li>
												</ul>
											</li>
											<li>
												Substract and Hold test set samples for Validation:是否设置测试集
											</li>
										</ul>
										<p>
											<b>3. Correlation / Partial Correlation</b>
											<br>
											相关性/偏相关性分析
											<br>
											可选参数：
										</p>
										<ul class="myCircleUl" style="margin-top: -10px">
											<li>
												Another data-matrix：计算相关性需提供的数据
											</li>
											<li>
												Method：选择相关系数计算方法
											</li>
											<li>
												Adjust P by：P值校正方法
											</li>
											<li>
												Correlation coefficient cutoff：相关性阈值设置
											</li>
											<li>
												P-value cutoff for significance: P值的阈值设置
											</li>
											<li>
												Adjusted P cutoff：校正后P值的阈值设置
											</li>
										</ul>
										<p>
											<b>4.PCA</b>
											<br>
											PCA分析以及绘图
											<br>
											可选参数：
										</p>
										<ul class="myCircleUl" style="margin-top: -10px">
											<li>
												Groups：用于分析的组别，此处所选组别为Data-matrix中组别的子集
											</li>
											<li>
												Scale method: 归一化方法选择
											</li>
										</ul>
										<p>
											<b>5.PLS-DA/OPLS-DA</b>
											<br>
											PLS-DA和OPLS-DA分析
											<br>
											可选参数：
										</p>
										<ul class="myCircleUl" style="margin-top: -10px">
											<li>
												Groups：用于分析的组别，此处所选组别为Data-matrix中组别的子集
											</li>
											<li>
												Scale method：归一化方法选择
											</li>
											<li>
												VIP cutoff：VIP值的阈值选择
											</li>
											<li>
												Q2Y low-limit：Q2Y指标的下限，低于该值则认为模型预测效果差
											</li>
											<li>
												up-limit of Q2Y y-intercept：回归直线的y轴截距上限，高于该值则认为过拟合
											</li>
										</ul>
										<p>
											<b>6.Univariate Analysis</b>
											<br>
											单维差异分析
											<br>
											可选参数：
										</p>
										<ul class="myCircleUl" style="margin-top: -10px">
											<li>
												Groups：用于分析的组别，此处所选组别为Data-matrix中组别的子集
											</li>
											<li>
												Method：差异检验方法选择
											</li>
											<li>
												FC calculation method：计算差异倍数时组内样本值的汇总计算方法
											</li>
											<li>
												P-value cutoff for significance：P值的显著性阈值设置
											</li>
											<li>
												Set FDR cutoff：FDR阈值设置
											</li>
											<li>
												|log2FC| cutoff：差异倍数取log2绝对值时的阈值
											</li>
										</ul>
										<p>
											<b>7.Get Intersection</b>
											<br>
											对多个输入数据取交集，该节点可以接受多个输入
										</p>
										<p>
											<b>8.Get Union</b>
											<br>
											对多个输入数据取并集，该节点可以接受多个输入
										</p>
										<p>
											<b>9.Pathway analysis</b>
											<br>进行Pathway分析
											<br>可选参数：
										</p>
										<ul class="myCircleUl pUl">
											<li>IPath analysis：使用ipath平台进行分析绘图</li>
											<li>Metabolite set enrichment analysis (MSEA)：选择富集分析所用的数据库</li>
											<li>Metabolomics pathway analysis (MetPA)：Pathway分析</li>
											<li>species：物种选择，此处默认与Data-matrix中的选择保持一致</li>
											<li>Over Representation Analysis：过代表分析（ORA）的检验方法</li>
											<li>Pathway Topology Analysis：通路拓扑结构计算方法</li>
										</ul>
										<p>
											<b>10.Random Forest</b><br>
											用随机森林算法对筛选得到的代谢物进行建模<br>
											可选参数：
										</p>
										<ul class="myCircleUl pUl">
											<li>Number of trees to grow：随机森林中树的个数设置</li>
											<li>Sampling with replacement：是否要重复抽样</li>
											<li>Set number of variables randomly sampled at each split：每次随机抽样的变量数目</li>
											<li>Set minimum nodesize：设置节点大小的下限</li>
											<li>Set maximum number of terminal nodes：设置终端节点数目上限</li>
											<li>Select top-m features：选择前m个最重要的特征</li>
										</ul>
										<p>
											<b>11.SVM</b><br>
											支持向量机算法对筛选得到的代谢物进行建模<br>
											可选参数：
										</p>
										<ul class="myCircleUl pUl">
											<li>kernel function：核函数的方法选择</li>
											<li>cost：表示惩罚因子，一般约小分类效果越好，默认1</li>
											<li>tolerance：回归终止容差</li>
											<li>epsilon：设置epsilon-SVR损失函数中的epsilon</li>
											<li>Select top-m features：选择前m个最重要的特征</li>
										</ul>
										<p>
											<b>12.Boruta</b><br>
											用Boruta算法对筛选得到的代谢物进行建模<br>
											可选参数：
										</p>
										<ul class="myCircleUl pUl">
											<li>max number of runs：随机森林运行的最大次数</li>
											<li>P-value cutoff for significance：显著性阈值设置</li>
										</ul>
										<p>
											<b>13.Predictive model</b><br>
											对上游的模型进行预测，这里提供多个模型可供选择<br>
											可选参数：
										</p>
										<ul class="myCircleUl pUl">
											<li>Scale method:归一化方法</li>
											<li>Perform cross-validation：是否执行交叉验证</li>
											<li>Import external data for validation：导入其他数据进行验证</li>
											<li>Random forest model：使用随机森林模型进行验证</li>
											<li>Gradient boosting model：使用梯度提升模型进行验证</li>
											<li>Logistic regression model：使用逻辑回归模型进行验证</li>
											<li>SVM model使用支持向量机模型进行验证</li>
											<li>Elastic Net model：使用弹性网络模型进行验证</li>
										</ul>
										<h4>4.3 使用流程进行分析</h4>
											<p>
												<b>1. 使用模板流程</b>
												<br>
												您可以直接使用内置模板流程，<b>选择模板</b>后，只需<b>选择您上传的数据信息</b>，再在流程第一步的 <b>"Data-matrix"</b> 节点中<b>选择您要分析的组别和物种</b>，即可开始分析。
												<br>
												说明：**"Data-matrix"**中的参数将直接控制下游所有节点的同类参数，例如，您在Groups参数中选择A组和B组，那么下游所有节点的分组也都被设置为A组和B组，无需分别设置。
											</p>
											<p>
												<b>2. 自定义流程</b><ul class="myDecimalUl">
										<li>当您选好数据时，<b>"Workflow"</b> 区域中将自动出现 <b>"Data-matrix"</b> 和 <b>"Cleaning and processing"</b> 两个分析节点，分别表示数据的读入和预处理过程，这也是所有流程中的必需分析内容。</li>
										<li>随后您可以从左侧备选栏中拖动任一节点到中央展示区域，然后从上游分析节点的下方<b>红色箭头处</b>点击并拖动，您将看到光标拉出曲线箭头，此箭头表示了上游节点输出结果的去向。</li>
												<li>接下来您可以将光标拖动至下游分析节点，此时您可以看到两个节点被曲线箭头连接起来，这表示上游节点的输出将作为下游节点的输入来继续分析。</li>
												<li>当所有拖入的节点顺利连接好上下游关系后，您可以点击每个节点来分别设置具体参数。</li>
										<li>一旦数据、分析流程、参数都设置好，即可点击流程框下方的<b>”Run”</b>来提交后台进行分析。</li>
											</ul>
											</p>
									</div>
								</div>

								<div class="row" id="5">
									<div class="col-xs-12">
										<h3>5.流程化分析结果（Results from Workflow）</h3>
										<p>
											该页面显示您在流程分析部分的所有任务。一旦您提交了分析流程，该任务将被添加到此页面中，并实时显示运行状态。
										</p>
										<h4>5.1管理流程任务</h4>
										<img class="myImg" src="@routes.Assets.at("images/guide_15.png")">
										<p>
											对于已结束分析的任务（成功或失败），您可以进行以下操作：
										</p>
										<ul class="myDiscUl">
											<li>
												<b>查看任务</b>——单击任务名称：
												<ul class="myCircleUl">
													<li>
														查看已运行任务的信息，包括任务状态、时间、数据、参数、以及在线预览的结果，其中在预览结果中您可以进行简单的图形调整
													</li>
												</ul>
											</li>
											<li>
												<b>下载任务结果</b>——单击下载按钮：
												<ul class="myCircleUl">
													<li>
														下载分析结果的压缩包。
													</li>
												</ul>
											</li>
											<li>
												<b>查看任务日志</b>——单击日志按钮：
												<ul class="myCircleUl">
													<li>
														显示任务运行情况，若任务成功，则显示“Run successfully!”，否则显示错误信息。
													</li>
												</ul>
											</li>
											<li>
												<b>修改任务</b>——单击修改按钮：
												<ul class="myCircleUl">
													<li>
														回到提交任务前的界面，可修改部分参数后直接提交，系统将自动在原任务名称后添加计数后缀，并作为一个新任务提交。
													</li>
												</ul>
											</li>
											<li>
												<b>删除任务</b>——单击删除按钮
												<ul class="myCircleUl">
													<li>
														从列表中删除该任务。
													</li>
												</ul>
											</li>
										</ul>
										<h4>5.2查看流程运行结果</h4>
										<img class="myImg" src="@routes.Assets.at("images/guide_16.png")">
										<p>
											在查看任务时，整个运行结束的任务分为2部分：
										</p>
										<ul class="myDecimalUl">
											<li>
												<b>Project information</b>
												<ul class="myDecimalUl">
													<li>
														展示该次分析的状态、时间、数据、参数信息
													</li>
													<li>
														展示流程信息：
														<ul class="myDecimalUl">
															<li>左侧展示筛选得到的代谢物列表</li>
															<li>中间展示您提交的流程，各个节点上会显示该步骤运行后得到的代谢物数目</li>
															<li>右侧展示您当前选择的节点的参数信息</li>
														</ul>
													</li>
												</ul>
											</li>
											<li>
												<b>Results</b> 若点击某个节点，此处将显示该节点出的分析结果
												<ul class="myDecimalUl">
													<li>若该节点有文件输出，则展示文件列表，包括文件名称、行数以及下载和预览按钮</li>
													<li>若该节点有图片输出，则同时展示结果图，并提供初步的图片修改功能，包括颜色、字体以及部分参数的调整</li>
												</ul>
											</li>

										</ul>
									</div>
								</div>

							</div>
							<div class="col-xs-3" id="myScrollspy">
								<div class="bs-docs-sidebar affix-top" role="complementary">
									<ul class="nav bs-docs-sidenav" id="myNav">
										<li class=""><a href="#1">1.平台页面简介</a></li>
										<li><a href="#2">2.模块类（Modules）</a></li>
										<li><a href="#3">3.模块分析结果（Results from Modules）</a></li>
										<li><a href="#4">4.流程类（Workflow）</a></li>
										<li><a href="#5">5.流程化分析结果（Results from Workflow）</a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>


				</div>
			</div>
		</div>

	</div>


	<script>

			var id = "@request.session.get("id")"

			$(function () {
				Tool.fileInput
				UserProfile.init

				$('body').scrollspy({target: '#myScrollspy'})

				$("#myNav").affix({
					offset: {
						top: 100
					}
				});

			})
	</script>


}
